<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Mapbox Online Tile</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.4.0/mapbox-gl.css" rel="stylesheet">
    <style>
        body { margin: 0; padding: 0; }
        #map { position: absolute; top: 0; bottom: 0; width: 100%; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1Ijoic25zcXNzIiwiYSI6ImNrZ2oxbWtqMTAzNnAyeXFwMDAzdmp2YTAifQ.AuaHmI9j-_VbOYxUSJACQw';
        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v11',
            center: [113.5,23.1], // 设置地图中心点的经纬度
            zoom: 8 // 设置地图缩放级别
        });
        
        // 添加在线瓦片图层
		
		var tileadd = 'https://earthengine.googleapis.com/v1/projects/earthengine-legacy/maps/f33a31e1d0ff5810f4e3fc1e128abd2f-0f1d4c7e952beac3bf987eb60cec9049/tiles/{z}/{x}/{y}'
		
        map.on('load', function() {
            map.addSource('tile_source', {
                type: 'raster',
                tiles: [tileadd], // 替换为您的在线瓦片URL
                tileSize: 256
            });
            map.addLayer({
                id: 'tile_layer',
                type: 'raster',
                source: 'tile_source',
                paint: {}
            });
        });
    </script>
</body>
</html>
